<template>
  <view class="app-container">
    <up-navbar bgColor="#0081ff" title="产品特色" titleStyle="color: white; font-size: 36rpx;" :safeAreaInsetTop="true"
      height="120rpx">
      <template #left>
        <view class="nav-left" @click="goBack">
          <up-icon name="arrow-left" size="24" color="#fff"></up-icon>
        </view>
      </template>
    </up-navbar>
    <!-- 内容区域 - 留出顶部安全距离 -->
    <scroll-view scroll-y class="content">
      <!-- 安全距离块 -->
      <view class="safe-area" :style="{ height: (GM_STATUS_BAR_HEIGHT + 160) + 'rpx' }"></view>

      <view class="empty-tip" v-if="contentItems.length === 0">
        没有信息，快去添加吧！
      </view>

      <!-- 内容列表 -->
      <view class="content-list">
        <view v-for="(item, index) in contentItems" :key="index" class="content-item">
          <!-- 图片类型 -->
          <view v-if="item.type === 'image'" class="image-item-wrapper">
            <view v-if="item.url" class="image-wrapper" @tap="previewImage(item.url)">
              <image :src="item.url" mode="widthFix" class="image" />
            </view>
            <view v-else class="image-placeholder" @tap="uploadImage(index)">
              <u-icon name="camera" size="80" color="#999" class="camera-icon" />
              <text class="upload-tip">点击上传商品图</text>
              <text class="upload-hint">请勿使用带水印、logo、模糊的图片
                (图片比例16:9，像素750px以上，5M以下)</text>
            </view>
            <view class="delete-btn" @tap.stop="deleteItem(index)">删除</view>
          </view>

          <!-- 文本类型 -->
          <view v-else-if="item.type === 'text'" class="text-item-wrapper">
            <textarea v-model="item.content" placeholder="请输入活动描述" class="textarea" auto-height @focus="onTextareaFocus"
              @input="onTextareaInput" />
            <view class="delete-btn" @tap.stop="deleteItem(index)">删除</view>
          </view>
        </view>
      </view>

      <!-- 底部安全距离 - 动态调整高度 -->
      <view class="safe-area-padding-bottom"
        :style="{ height: isKeyboardShow ? (keyboardHeight + 120) + 'rpx' : '120rpx' }" />
    </scroll-view>

    <!-- 底部按钮区域 - 使用flex布局固定在屏幕底部 -->
    <view class="bottom-buttons">
      <view class="bottom-content">
        <view class="left-buttons">
          <view class="icon-button" @tap="addImageItem">
            <u-icon name="photo" size="30" color="#333" class="function-icon" />
            <text>添加图片</text>
          </view>
          <view class="icon-button" @tap="addTextItem">
            <u-icon name="file-text" size="30" color="#333" class="function-icon" />
            <text>添加文本</text>
          </view>
        </view>
        <view class="right-buttons">
          <u-button type="default" text="返回" @tap="goBack" class="back-btn" />
          <u-button type="primary" text="确定" @tap="onSave" class="confirm-btn" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { useProductStore } from '@/store/product.js';

export default {
  data() {
    return {
      GM_STATUS_BAR_HEIGHT: uni.getSystemInfoSync().statusBarHeight,
      // 内容项数组，用于存储所有的图片和文本内容
      contentItems: [],
      productStore: null,
      // 键盘高度
      keyboardHeight: 0,
      // 键盘是否弹出
      isKeyboardShow: false
    };
  },

  mounted() {
    // 安全初始化productStore
    try {
      this.productStore = useProductStore();
    } catch (error) {
      console.error('初始化product store失败:', error);
      // 提供一个mock store对象以避免后续访问错误
      this.productStore = { subPageData: { contentItems: [], feature: '', productFeatures: [] }, updateSubPageData: () => { } };
    }

    // 组件挂载时，从store加载已有数据
    this.loadInitialData();
    // 监听键盘事件
    this.initKeyboardEvents();
  },

  beforeUnmount() {
    // 清理键盘事件监听
    this.removeKeyboardEvents();
  },

  methods: {
    // 添加图片项
    addImageItem() {
      this.contentItems.push({
        type: 'image',
        url: ''
      });
    },

    // 添加文本项
    addTextItem() {
      this.contentItems.push({
        type: 'text',
        content: ''
      });
    },

    // 上传图片
    uploadImage(index) {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];

          // 显示上传进度
          uni.showLoading({
            title: '上传中...',
            mask: true
          });

          // 上传到服务器
          uni.uploadFile({
            url: 'https://abc.qctrips.cn/local-file/upload',
            filePath: tempFilePath,
            name: 'file',
            header: {
              'Authorization': uni.getStorageSync('accessToken') || ''
            },
            success: (uploadRes) => {
              uni.hideLoading();
              try {
                const data = JSON.parse(uploadRes.data);
                console.log('上传响应:', data);

                if (data.code === 200) {
                  // 使用服务器返回的URL
                  const fileUrl = data.data.url;

                  // 使用展开运算符创建新对象，确保响应式系统能够检测到变化
                  this.$set(this.contentItems, index, {
                    ...this.contentItems[index],
                    url: fileUrl,
                    objectName: data.data.objectName
                  });

                  console.log('上传图片成功:', fileUrl);

                  // 立即保存数据到store，确保返回后能看到图片
                  try {
                    // 生成符合API格式的数据
                    const productFeatures = this.generateProductFeatures();

                    // 更新store中的数据
                    if (this.productStore && typeof this.productStore.updateSubPageData === 'function') {
                      const featureString = this.contentItems.map(item => {
                        if (item.type === 'text' && item.content) {
                          return item.content;
                        }
                        return '';
                      }).filter(Boolean).join('\n');

                      this.productStore.updateSubPageData('feature', featureString || JSON.stringify(this.contentItems));
                      this.productStore.updateSubPageData('productFeatures', productFeatures);
                    }
                  } catch (e) {
                    console.error('保存产品特色数据失败:', e);
                  }
                } else {
                  throw new Error(data.msg || '上传失败');
                }
              } catch (error) {
                console.error('解析上传响应失败:', error);
                uni.showToast({
                  title: '上传失败',
                  icon: 'none'
                });
              }
            },
            fail: (err) => {
              uni.hideLoading();
              console.error('上传失败:', err);
              uni.showToast({
                title: '上传失败',
                icon: 'none'
              });
            }
          });
        },
        fail: (err) => {
          console.error('选择图片失败:', err);
        }
      });
    },

    // 预览图片
    previewImage(url) {
      uni.previewImage({
        urls: [url]
      });
    },

    // 删除项
    deleteItem(index) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除此项吗？',
        success: (res) => {
          if (res.confirm) {
            this.contentItems.splice(index, 1);
          }
        }
      });
    },

    // 生成符合API格式的数据
    generateProductFeatures() {
      try {
        const productFeatures = [];

        this.contentItems.forEach((item, index) => {
          if (item.type === 'image' && item.url) {
            productFeatures.push({
              imgUrl: item.url,
              alt: '',
              order: index + 1,
              type: 'image'
            });
            console.log('生成产品特色数据成功:', productFeatures[index]);

          } else if (item.type === 'text' && item.content) {
            productFeatures.push({
              imgUrl: '',
              alt: item.content,
              order: index + 1,
              type: 'text'
            });
          }
        });

        return productFeatures;
      } catch (e) {
        console.error('生成产品特色API数据失败:', e);
        return [];
      }
    },

    // 加载初始数据
    loadInitialData() {
      try {
        // 从store获取数据
        if (this.productStore && this.productStore.subPageData) {
          // 优先从store的productFeatures获取数据并转换为contentItems格式
          if (this.productStore.subPageData.productFeatures && this.productStore.subPageData.productFeatures.length > 0) {
            this.contentItems = this.productStore.subPageData.productFeatures.map(item => {
              if (item.type === 'image' && item.imgUrl) {
                return { type: 'image', url: item.imgUrl };
              } else if (item.type === 'text' && item.alt) {
                return { type: 'text', content: item.alt };
              }
              return null;
            }).filter(Boolean);
          }
          // 尝试从feature字段解析数据
          else if (this.productStore.subPageData.feature && typeof this.productStore.subPageData.feature === 'string') {
            try {
              const parsedFeature = JSON.parse(this.productStore.subPageData.feature);
              if (Array.isArray(parsedFeature)) {
                this.contentItems = parsedFeature;
              }
            } catch (e) {
              console.warn('解析feature数据失败，使用空数组:', e);
              this.contentItems = [];
            }
          }
        }
      } catch (e) {
        console.error('加载产品特色数据失败:', e);
        this.contentItems = [];
      }
    },

    // 生成HTML格式的数据，用于主页面预览
    generateHtmlContent() {
      try {
        let html = '';
        
        this.contentItems.forEach(item => {
          if (item.type === 'image' && item.url) {
            html += `<img src="${item.url}" style="max-width:100%;height:auto;display:block;margin:10rpx 0;" />`;
          } else if (item.type === 'text' && item.content) {
            html += `<p style="margin-bottom:20rpx;white-space:pre-wrap;word-break:break-word;">${item.content}</p>`;
          }
        });
        
        return html;
      } catch (e) {
        console.error('生成HTML内容失败:', e);
        return '';
      }
    },
    
    // 保存方法
    onSave() {
      try {
        // 生成符合API格式的数据
        const productFeatures = this.generateProductFeatures();
        // 生成HTML格式数据用于预览回显
        const htmlContent = this.generateHtmlContent();

        // 更新store中的数据
        // 当没有内容时，清空所有相关字段
        if (this.contentItems.length === 0) {
          if (this.productStore && typeof this.productStore.updateSubPageData === 'function') {
            this.productStore.updateSubPageData('feature', '');
            this.productStore.updateSubPageData('productFeatures', []);
            this.productStore.updateSubPageData('productFeaturesHtml', ''); // 清空HTML内容
          }
        } else {
          if (this.productStore && typeof this.productStore.updateSubPageData === 'function') {
            // 保存字符串形式的产品特色
            const featureString = this.contentItems.map(item => {
              if (item.type === 'text' && item.content) {
                return item.content;
              }
              return '';
            }).filter(Boolean).join('\n');

            // 同时保存多种格式的数据，确保回显完整
            this.productStore.updateSubPageData('feature', featureString || JSON.stringify(this.contentItems));
            this.productStore.updateSubPageData('productFeatures', productFeatures);
            this.productStore.updateSubPageData('productFeaturesHtml', htmlContent); // 保存HTML内容用于预览
          }
        }

        uni.navigateBack();
      } catch (e) {
        console.error('保存数据失败:', e);
        uni.showToast({ title: '保存失败，请重试', icon: 'none' });
      }
    },

    // 返回方法
    goBack() {
      try {
        // 询问用户是否保存
        if (this.contentItems.length > 0) {
          uni.showModal({
            title: '提示',
            content: '有未保存的内容，是否保存？',
            success: (res) => {
              if (res.confirm) {
                this.onSave();
              } else if (res.cancel) {
                uni.navigateBack();
              }
            }
          });
        } else {
          // 即使没有内容，也要确保清空store和本地存储
          this.onSave();
        }
      } catch (e) {
        console.error('返回操作失败:', e);
        uni.navigateBack();
      }
    },

    // 初始化键盘事件监听
    initKeyboardEvents() {
      // 监听键盘弹出
      uni.onKeyboardHeightChange((res) => {
        this.keyboardHeight = res.height;
        this.isKeyboardShow = res.height > 0;

        if (this.isKeyboardShow) {
          // 键盘弹出时，给底部安全区域增加高度
          this.$nextTick(() => {
            // 延迟执行，确保DOM更新
            setTimeout(() => {
              this.scrollToBottom();
            }, 100);
          });
        }
      });
    },

    // 移除键盘事件监听
    removeKeyboardEvents() {
      uni.offKeyboardHeightChange();
    },

    // 滚动到底部 - 适配微信小程序
    scrollToBottom() {
      try {
        // 使用微信小程序的API来滚动
        uni.createSelectorQuery().select('.content').boundingClientRect((rect) => {
          if (rect) {
            uni.createSelectorQuery().select('.content').scrollTo({
              scrollTop: 9999,
              duration: 300
            });
          }
        }).exec();
      } catch (e) {
        console.error('滚动到底部失败:', e);
      }
    },

    // 文本框获得焦点时滚动到可视区域
    onTextareaFocus(e) {
      // 获取当前textarea元素
      const textarea = e.currentTarget;
      // 延迟执行，确保键盘已弹出
      setTimeout(() => {
        // 计算文本框位置并滚动到可视区域
        this.scrollToTextarea(textarea);
      }, 100);
    },

    // 文本框输入时自动滚动，确保光标可见
    onTextareaInput(e) {
      if (this.isKeyboardShow) {
        const textarea = e.currentTarget;
        // 延迟执行，确保DOM更新
        setTimeout(() => {
          this.scrollToTextarea(textarea);
        }, 50);
      }
    },

    // 滚动到文本框位置 - 适配微信小程序
    scrollToTextarea(textarea) {
      try {
        // 在微信小程序中，使用uni的API来滚动
        uni.createSelectorQuery().select('.content').boundingClientRect((rect) => {
          if (rect) {
            // 简单地滚动到底部，这在小程序环境中更安全
            uni.createSelectorQuery().select('.content').scrollIntoView({
              behavior: 'smooth'
            });
          }
        }).exec();
      } catch (e) {
        console.error('滚动失败:', e);
      }
    }
  }
};
</script>

<style scoped>
/* 全局容器 - 使用flex布局 */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffffff;
}

/* 内容区域 - 占据剩余空间 */
.content {
  flex: 1;
  background-color: #ffffff;
}

/* 顶部安全距离 */
.safe-area-padding-top {
  height: 190rpx;
}

/* 底部安全距离 */
.safe-area-padding-bottom {
  height: 200rpx;
  /* 动态调整安全距离 */
  transition: height 0.3s ease;
}

/* 键盘弹出时增加底部安全距离 */
.content {
  transition: margin-bottom 0.3s ease;
}

/* 空状态提示 */
.empty-tip {
  font-size: 32rpx;
  color: #999999;
  text-align: center;
  margin-top: 200rpx;
}

/* 内容列表 */
.content-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding: 0 20rpx;
}

/* 内容项通用样式 */
.content-item {
  display: flex;
  flex-direction: column;

}

/* 图片项样式 */
.image-item-wrapper {
  display: flex;
  flex-direction: column;
  border: 1px dashed #dddddd;
  border-radius: 8rpx;
  overflow: hidden;
}

.image-wrapper {
  width: 100%;
  min-height: 300rpx;
}

.image {
  width: 100%;
  min-height: 300rpx;
}

/* 图片占位符样式 */
.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 60rpx 20rpx;
  min-height: 300rpx;
  box-sizing: border-box;
  background-color: #fafafa;
}

.camera-icon {
  margin-bottom: 20rpx;
  opacity: 0.6;
}

.upload-tip {
  font-size: 32rpx;
  color: #333333;
  margin-bottom: 10rpx;
}

.upload-hint {
  font-size: 24rpx;
  color: #999999;
  text-align: center;
  line-height: 1.5;
}

/* 文本项样式 */
.text-item-wrapper {
  display: flex;
  flex-direction: column;
  border: 1px dashed #dddddd;
  border-radius: 8rpx;
  padding: 20rpx 0 0 20rpx;
  background-color: #fafafa;
}

.textarea {
  width: 100%;
  min-height: 200rpx;
  font-size: 28rpx;
  color: #333333;
  line-height: 1.8;
  box-sizing: border-box;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0;
}

/* 删除按钮样式 - 使用flex布局定位 */
.delete-btn {
  display: flex;
  align-self: flex-end;
  margin-top: -55rpx;
  margin-right: 10rpx;
  padding: 0 15rpx;
  background-color: rgba(255, 255, 255, 0.8);
  color: #ff3b30;
  font-size: 24rpx;
  border-radius: 15rpx;
  z-index: 10;
}

/* 底部按钮区域 - 固定在屏幕底部 */
.bottom-buttons {
  display: flex;
  width: 100%;
  background-color: #ffffff;
  border-top: 1px solid #f0f0f0;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.03);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;

}

.bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20rpx 30rpx;
}

/* 左侧功能按钮 */
.left-buttons {
  display: flex;
  gap: 40rpx;
}

.icon-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rpx;
}

.function-icon {
  margin-bottom: 8rpx;
}

.icon-button text {
  font-size: 24rpx;
  color: #333333;
}

/* 右侧操作按钮 */
.right-buttons {
  display: flex;
  gap: 20rpx;
}

.back-btn {
  min-width: 160rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  border-radius: 35rpx;
  background-color: #f5f5f5;
  color: #333333;
}

.confirm-btn {
  min-width: 160rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  border-radius: 35rpx;
  background-color: #07c160;
  color: #ffffff;
}

/* 适配文本区域的placeholder样式 */
.textarea::-webkit-input-placeholder {
  color: #cccccc;
  font-size: 28rpx;
}

/* 修复点击删除按钮时触发下层元素的问题 */
.delete-btn:active {
  opacity: 0.8;
}

/* 滚动条样式 */
.content::-webkit-scrollbar {
  width: 4rpx;
}

.content::-webkit-scrollbar-thumb {
  background-color: #dddddd;
  border-radius: 2rpx;
}
</style>